<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>面试题管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加面试题</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form
        ref="addFormRef"
        :model="addForm"
        label-width="100px"
        :rules="addRules"
      >
        <el-form-item label="面试题标题:" prop="mstInfoTitle">
          <el-input v-model="addForm.mstInfoTitle"></el-input>
        </el-form-item>

        <el-form-item label="面试题描述:" prop="mstInfoTitle">
          <el-input v-model="addForm.mstInfoDes"></el-input>
        </el-form-item>

        <el-form-item label="面试题排序:" prop="mstInfoSort">
          <el-input v-model.number="addForm.mstInfoSort"></el-input>
        </el-form-item>

        <el-form-item label="面试题分类:" prop="mstInfoTitle">
          <!-- <el-input v-model="addForm.mstSelId"></el-input> -->
          <el-select v-model="addForm.mstSelId" placeholder="请选择">
            <el-option
              v-for="item in mstsel"
              :key="item.id"
              :label="item.mstSelName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="面试题详情:"> </el-form-item>
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
        >
        </quill-editor>
      </el-form>

      <el-row class="subclass" >
        <el-button type="primary" @click="addClick">确认</el-button>
        <el-button type="danger" @click="rollClick">取消</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getMstSelList } from '@/api/mstsel/index'
import { addMstInfo } from '@/api/mstInfo/index'
export default {
  // import 引入的组件需要注入到对象中才能使用
  name: 'addMstInfo',
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      addForm: {
        mstInfoTitle: '',
        mstInfoDes: '',
        mstSelId: '',
        mstDetail: '',
        mstInfoSort: 0
      },
      addRules: {
        mstInfoTitle: [
          { required: true, message: '请输入面试题标题', trigger: 'blur' }
        ],
        mstInfoDes: [
          { required: true, message: '请输入面试题描述', trigger: 'blur' }
        ],
        mstselId: [
          { required: true, message: '请输入面试题分类', trigger: 'blur' }
        ],
        mstInfoSort: [
          { required: true, message: '请输入面试题分类', trigger: 'blur' },
          { type: 'number', message: '分类序号为数字值' }
        ]
      },
      mstsel: [],
      content: '<p>输入面试题内容！</p>',
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [
              {
                size: [
                  '12',
                  '14',
                  '16',
                  '18',
                  '20',
                  '22',
                  '24',
                  '28',
                  '32',
                  '36'
                ]
              }
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      }
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async addClick () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return false
        this.addForm.mstDetail = this.content
        const res = await addMstInfo(this.addForm)
        this.$message.success(res.data)
        this.$router.push('/mstinfo')
      })
    },
    rollClick () {
      this.addForm = ''
      this.$router.go(-1)
    },
    // 失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    async getMstSelList () {
      const res = await getMstSelList()
      this.mstsel = res.data
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
    this.getMstSelList()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共 css 类
.subclass {
  margin-top: 20px;
  text-align: right;
}
</style>
